<!DOCTYPE html5>
<html>

<head>
    <meta charset="UTF-8">
    <title>摄影教程</title>
    <link rel="stylesheet" href="css/new.css"/>
    <link rel="stylesheet" href="css/photoCourse.css"/>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>

<body>
<header>
    <% include header.ejs %>
</header>
<nav class="secondary-nav">
    <ul class="nav-list">
        <li class="active" data-index="0">
            <a target="_self" href="https://tuchong.com/2990340/">摄影教程</a>
        </li>
    </ul>
</nav>
<main>
    <div class="container">
        <div class="content">
            <div class="widget-courselist">
                <div class="widget-courselist">
                    <ul class="pagelist-wrapper" id="articleArea">
                    </ul>
                </div>
            </div>
        </div>
        <nav aria-label="..." class="text-right">
            <ul class="pagination">
                <li class="disabled">
                        <span aria-hidden="true">&laquo;</span>
                </li>
                <li class="active">
                    <span>1</span>
                </li>
                <li>
                    <span>2</span>
                </li>
                <li class="">
                    <span>3</span>
                </li>
                <li class="">
                    <span>4</span>
                </li>
                <li class="disabled">
                    <span aria-hidden="true">&raquo;</span>
                </li>
            </ul>
        </nav>
    </div>
</main>
<% include footer.ejs %>

<!--文章 前端模板-->
<script type="text/template" id="articleTemplate">
    <li class="impression-item impression-viewed" data-post-id="">
        <a href="#" class="item-cover" target="_blank">
            <img src="{{=title_image.url}}">
        </a>
        <div class="item-info">
            <a href="#" class="item-title" title="{{=title}}"
               target="_blank">{{=title}}</a>
            <p class="item-desc">
                {{=excerpt}}
            </p>
        </div>
        <div class="item-related">
            <div class="item-handler">
                <span>用户编号:{{=author_id}}</span>
                <span>  | {{=views}}阅读 · {{=favorites}}喜欢 · {{=comments}}评论</span>
            </div>
        </div>
    </li>
</script>

<script type="text/javascript">
    getArticle(0);
    //分页
    $(".pagination li span").click(function () {
        var that=this;
        var val=$(that).text();
        var event = event || window.event;
        var target = event.srcElement || event.target;
        $(target).parent().addClass("active");
        $(target).parent().siblings().removeClass("active");
        getArticle(val-1);
    });

    function getArticle(page) {
        $("#articleArea").html("");
        var compileArticle = _.template($("#articleTemplate").html());
        $.ajax({
            "url": "/articleData?page="+page,
            "type": "get",
            "success": function (result) {
                if(result=="101"){
//                    $("#loading").fadeOut();
//                    $("#loadEnd").css("display","block");
                    return;
                }
                let result1 = result.posts;
                iterator(0);
                //迭代器
                function iterator(i) {
                    if (i == result1.length) {
                        //在这里书写请求完毕之后做的事情
                        return;  //不用继续迭代了
                    }
                    //组装模板
                    let htmlstring = compileArticle(result1[i]);
                    //添加DOM
                    $("#articleArea").append($(htmlstring));
                    iterator(i + 1);
                }
            }
        })
    }

</script>
</body>

</html>